<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>咨询师学生</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>

	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">学生名:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
				</div>
				
				<label class="layui-form-mid">录入状态:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="stustatus" name="stustatus">
						<option value="">所有</option>
						<option value="1">已录入</option>
						<option value="2">已缴费</option>
						<option value="3">失败</option>
					</select>
				</div>
				
				<label class="layui-form-mid">是否付款:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="ispay" name="ispay">
						<option value="">所有</option>
						<option value="0">未付款</option>
						<option value="1">已付款</option>
					</select>
				</div>
				
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="createTime" name="createTime" placeholder="yyyy-MM-dd HH-mm-ss"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="endDate" name="endDate" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off"
						class="layui-input">
				</div>

				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<a class="layui-btn layui-btn-small" style="line-height:1.6em;float:right"
						href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height:38px">&#xe666;</i>
					</a>
				</div>
			</form>
		</div>

		<!-- 修改的弹层页面  -->
		<div id="editLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editForm" id="editForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>学生名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="name" name="name" class="layui-input" lay-verify="required">
						<input type="hidden" name="id" />
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>年龄:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="age" name="age" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>性别:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="sex" name="sex" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>手机号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="phone" name="phone" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>QQ号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="qq" name="qq" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>微信号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="weixin" name="weixin" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>录入状态:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="stustate" name="stustate">
						<option value="">所有</option>
						<option value="1">已录入</option>
						<option value="2">已缴费</option>
						<option value="3">失败</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>录入人id:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="netpusherid" name="netpusherid" class="layui-input" lay-verify="required" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>录入人名字:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="createuser" name="createuser" class="layui-input" lay-verify="required" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>咨询师id:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="askerid" name="askerid" class="layui-input" lay-verify="required" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>是否有效:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="isvalid" name="isvalid">
						<option value="">所有</option>
						<option value="0">无效</option>
						<option value="1">有效</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>咨询师名字:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="zixunname" name="zixunname" class="layui-input" lay-verify="required" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>创建时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="createtime" name="createtime" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>是否跟踪:</label>
					<div class="layui-input-inline" style="width: 350px;">
				    	<select id="isretuenvist" name="isretuenvist">
						<option value="">所有</option>
						<option value="0">未开始跟踪</option>
						<option value="1">正在跟踪</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>第一次跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="firstvisittime" name="firstvisittime" class="layui-input"
							lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>是否在家:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="ishome" name="ishome" class="layui-input"
							lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>是否付款:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="ispay" name="ispay">
						<option value="">所有</option>
						<option value="0">未付款</option>
						<option value="1">已付款</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>付款时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="paytime" name="paytime" class="layui-input"
							lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>付款金额:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="money" name="money" class="layui-input"
							lay-verify="required">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改</button>
				</div>
			</form>
		</div>


		<!-- 新增的弹层页面  -->
		<div id="addLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="addForm" id="addForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="hidden" id="studentid" name="studentid">
						<input type="hidden" id="studentname" name="name">
						<input type="hidden" id="userid" name="userid">
						<input type="text" id="followtime" name="followtime" class="layui-input" placeholder="yyyy-MM-dd HH-mm-ss"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>下次跟踪时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="nextfollowtime" name="nextfollowtime" class="layui-input" placeholder="yyyy-MM-dd HH-mm-ss"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>内容:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="content" name="content" class="layui-input"
							lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪类型:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="followtype" name="followtype">
						<option value="">所有</option>
						<option value="1">电话跟踪</option>
						<option value="2">QQ跟踪</option>
						<option value="3">微信跟踪</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>创建时间:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="createtime2" name="createtime" class="layui-input" placeholder="yyyy-MM-dd HH-mm-ss"
							autocomplete="off" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>跟踪状态:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="followstate" name="followstate">
						<option value="">所有</option>
						<option value="1">已付款</option>
						<option value="2">正在跟踪</option>
						<option value="3">失败</option>
					</select>
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addSubmit" lay-submit="">添加</button>
				</div>
			</form>
		</div>

		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		
		<!--开启头部工具栏  -->
		<script type="text/html" id="toolbarDemo">
	  		<div class="layui-btn-container">
	    		<button class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon"></i>导出Excel</button>
				<button class="layui-btn layui-btn-sm" lay-event="downloadTemplate"><i class="layui-icon"></i>下载模板</button>
	  		</div>
		</script>
		
		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-small" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">添加跟踪信息</a>
		</script>



		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.$ //jQuery
					,
					table = layui.table,
					transfer = layui.transfer; //表格组件

				//日期控件
				laydate.render({
					elem: '#createTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate',
					type: 'datetime'
				});
				
				//日期控件
				laydate.render({
					elem: '#followtime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#nextfollowtime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#createtime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#createtime2',
					type: 'datetime'
				});

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: "" + globalData.server + "students/getStudentsAll", //提交到后台的地址
					method: 'post', //提交方式 get或者post
					where: {
						"askerid": globalData.getCurUid(),
						"token": globalData.token
					},
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
							field: 'id', //对应实体类里的属性    （必需有）
							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							title: '学生id', //表头名称			（必需有）
							sort: true,
							width: 100 //开启排序（可选）
						}, {
							field: 'name',
							title: '学生名',
							width: 100
						}, {
							field: 'age',
							title: '年龄'
						}, {
							field: 'sex', //对应实体类里的属性
							title: '性别' //表头名称
						}, {
							field: 'phone',
							title: '手机号',
							width: 150
						}, {
							field: 'qq',
							title: 'QQ号',
							width: 150
						}, {
							field: 'weixin',
							title: '微信号',
							width: 150
						}, {
							field: 'stustate',
							title: '录入状态',
							width: 100,
							templet: function (d) {
				               if (d.stustate =='1'){
				                    return '<div style="color:#5FB878;">已录入</div>'
				                }else if(d.stustate =='2') {
				                    return '<div style="color:#FFB800;">已缴费</div>'
				                }else {
				                    return '<div style="color:#c2c2c2;">失败</div>'
				                }
				            }
						}, {
							field: 'netpusherid',
							title: '录入人id',
							width: 200
						}, {
							field: 'createuser',
							title: '录入人姓名',
							width: 200
						}, {
							field: 'askerid',
							title: '咨询师id',
							width: 100
						}, {
							field: 'isvalid',
							title: '是否有效',
							width: 100,
							templet: function (d) {
				                if (d.isvalid =='0'){
				                    return '<div style="color:#c2c2c2;">无效</div>'
				                }else {
				                    return '<div style="color:#5FB878;">有效</div>'
				                }
				            }
						}, {
							field: 'zixunname',
							title: '咨询师姓名',
							width: 100
						}, {
							field: 'createtime',
							title: '创建时间',
							width: 150
						}, {
							field: 'isretuenvist',
							title: '是否跟踪',
							width: 100,
							templet: function (d) {
				                if (d.isretuenvist =='1'){
				                    return '<div style="color:#5FB878;">正在跟踪</div>'
				                }else {
				                    return '<div style="color:#FF0000;">未开始跟踪</div>'
				                }
				            }
						}, {
							field: 'firstvisittime',
							title: '第一次跟踪时间',
							width: 150
						}, {
							field: 'ishome',
							title: '是否在家',
							width: 100
						}, {
							field: 'ispay',
							title: '是否付款',
							width: 100,
							templet: function (d) {
				                if (d.ispay =='0'){
				                    return '<div style="color:#FF0000;">未付款</div>'
				                }else {
				                    return '<div style="color:#5FB878;">已付款</div>'
				                }
				            }
						}, {
							field: 'paytime',
							title: '付款时间',
							width: 150
						}, {
							field: 'money',
							title: '付款金额',
							width: 100
						}, {
							fixed: 'right',
							title: '操作',
							width: 300,
							toolbar: '#barDemo'
						}]
					]
				});



				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});


				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					var str = $("#addForm").serialize() + "&token=" + globalData.token;
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "netfollows/createNetfollows", //提交路径
						data: str, //参数
						dataType: 'json',
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("添加成功！！！"); //提示信息
							table.reload('proTable'); // 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});

				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj){
				    switch(obj.event){
				    	//导出按钮
				      case 'export':
				    		window.location.href="" + globalData.server + "excel/exportwdxs/"+globalData.getCurUid();
				      break;
				      	//下载模板
				      case 'downloadTemplate':
				    	 window.location.href="" + globalData.server + "学生列表.xlsx";
				      	break;
				    };
				  });
			 	


				//数据表格里的事件监听
				table.on('tool(filterTable)', function(obj) {
					var data = obj.data; //获取当前行的数据

					switch (obj.event) {
						
						case 'edit': //修改操作
							//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在修改编号【' + data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px', '600px']
							});
							break;
						case 'del': //删除操作
							if (confirm("确定删除吗？")) {
								$.ajax({
									type: 'post', //提交方式get或post
									url: "" + globalData.server + "students/deleteStudents", //提交路径
									data: {
										"id": data.id,
										"token": globalData.token
									}, //参数
									dataType: 'json', //返回的数据类型
									success: function(res) { //提交成功
										layer.alert("删除成功！！！"); //提示信息
										table.reload('proTable'); // 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								});
							}
							break;
						case 'add': //查看操作
							//数据的回显
							$("#studentid").val(data.id);
							$("#studentname").val(data.name);
							$("#userid").val(globalData.getCurUid());
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在添加【' + data.name + '】的跟踪信息',
								content: $('#addLayer'),
								area: ['800px', '600px']
							});
							break;
					};
				})

				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "students/updateStudents", //提交路径
						data: $("#editForm").serialize() + "&token=" + globalData.token, //参数
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("修改成功！！！"); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});
				
				
				
			});
		</script>
	</body>
</html>
